<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box1 {
				border: 10px red solid;
			}

			.box2 {
				width: 6.25rem;
				height: 6.25rem;
				background-color: blue;

				/*
				在文档流中，父元素的高度默认是被子元素撑开的。
					也就是子元素的高度决定父元素的高度。
				
				但是子元素浮动以后，子元素会完全脱离文档流。
					子元素无法撑起父元素的高度，导致父元素的高度塌陷。
				
				解决方法
					1 将父元素的高度写死
				*/

				/*
				   以下情况例外：
				   为子元素设置向左边浮动
			   
			   */
				float: left;
			}

			.box1 {
				height: 100px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<!-- H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷HTML+CSS教程\视频\视频3《62.尚硅谷_HTML&CSS基础_解决高度塌陷问题一》 -->
		<div class="box1">
			<div class="box2">
				a
			</div>
			<div class="box3"></div>
		</div>
	</body>
</html>
